<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <title>Header Fragment</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag" />
</head>

<body>
    <div th:fragment="header">
        <header id="app-bar" class="mdc-top-app-bar mdc-top-app-bar--fixed mdc-elevation--z4">
            <nav class="mdc-top-app-bar__row">
                <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
                    <button class="mdc-icon-button mdc-top-app-bar__navigation-icon">
                        <span class="mdi mdi-menu"></span>
                        <span class="sr-only">menu</span>
                    </button>
                </section>
                <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-center">
                    <span class="cas-brand mx-auto">
                        <span class="sr-only">CAS</span>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 336.82 167.83" class="cas-logo">
                            <defs>
                                <style>
                                    .cls-1 {
                                        fill: #024d71;
                                    }

                                    .cls-2 {
                                        fill: #74c163;
                                    }
                                </style>
                            </defs>
                            <title>cas_logo</title>
                            <g id="Layer_2" data-name="Layer 2">
                                <path class="cls-1"
                                    d="M217.72,469.85c-17.68,1.31-38.31,1-54.18-7.87-12.59-7-23.71-18.52-28.72-32.14a82,82,0,0,1-4.49-27.49c0-36.26,16.11-64.23,40.29-80.34,16.59-11.38,36-16.83,58.54-16.83,17.3,0,30.34,4,35.08,6.64l-9.48,27.73c-4.5-2.38-15.17-5.22-28.92-5.22s-26.78,4.27-36.5,12.33c-13.27,11.13-22,29.39-22,51.66,0,25.6,14.46,42.67,42.43,42.67a161.48,161.48,0,0,0,22.38-1.19Z"
                                    transform="translate(-130.33 -305.18)" />
                                <path class="cls-1"
                                    d="M322.77,398.75l-2.72-30.4c-.71-8.76-1.42-21.56-2.14-31.28h-.71c-4,9.72-8.53,22-12.8,31.28l-13.69,30.08-13.53,33.43-17.33,38.41h-36.5l78-159.75h43.85l18.49,159.75H327.87l-3.05-38.12Z"
                                    transform="translate(-130.33 -305.18)" />
                                <path class="cls-1"
                                    d="M364.31,438.85c12.27,3.81,21.29,5.19,36.22,5.19,13,0,20.87-6.71,20.87-19,0-9.24-6.87-14.93-21.57-22.75-16.82-9-32.94-21.8-32.94-42.42,0-32.24,28-51.91,62.81-51.91,19.19,0,30.57,4.27,37.44,7.82l-10.66,28.44a62.94,62.94,0,0,0-29.63-6.87c-15.88,0-24.17,7.82-24.17,16.59,0,9.48,9.72,15.17,23.23,22.75,19.43,10.19,31.52,23.23,31.52,42.43,0,35.55-29.44,55.72-64.71,53.8a231.52,231.52,0,0,1-24.78-2.61Z"
                                    transform="translate(-130.33 -305.18)" />
                            </g>
                            <g id="swoosh">
                                <path class="cls-2"
                                    d="M257.45,432.24a41.64,41.64,0,0,1,13.11-.32,39.17,39.17,0,0,1,16.89,6.2l0,0c10.55-15,29.11-25,50.24-25,19.75,0,37.34,8.85,48.16,22.28l1-.77c-12.85-17.31-37.44-29-65.67-29-26.92,0-50.54,10.65-63.81,26.65Z"
                                    transform="translate(-130.33 -305.18)" />
                            </g>
                        </svg>
                    </span>
                </section>
                <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
                    <button id="cas-notifications-menu"
                        class="mdc-icon-button mdc-top-app-bar__action-item cas-notification-toggle"
                        aria-label="Bookmark this page">
                        <span class="mdi mdi-bell-alert"></span>
                        <span class="sr-only">notifications</span>
                        <i id="notifications-count" class="notifications-count count">2</i>
                    </button>
                </section>
            </nav>

        </header>
        <aside id="app-drawer" class="mdc-drawer mdc-drawer--dismissible mdc-drawer--modal">
            <div class="mdc-drawer__header">
                <h3 class="mdc-drawer__title">CAS</h3>
                <h6 class="mdc-drawer__subtitle">Central Authentication Service</h6>
            </div>
            <div class="mdc-drawer__content">
                <nav class="mdc-list">
                    <a th:href="@{/actuator}" class="mdc-list-item">
                        <i class="mdi mdi-cogs"></i>&nbsp;
                        <span class="mdc-list-item__text">[[#{cas.login.resources.endpoints}]]</span>
                    </a>
                    <hr class="mdc-list-divider" />
                    <a class="mdc-list-item" href="https://apereo.github.io/cas">
                        <i class="mdi mdi-file-code-outline"></i>&nbsp;
                        <span class="mdc-list-item__text">[[#{cas.login.resources.wiki}]]</span>
                    </a>
                    <a class="mdc-list-item" href="https://github.com/apereo/cas/pulls">
                        <i class="mdi mdi-call-merge"></i>&nbsp;
                        <span class="mdc-list-item__text">[[#{cas.login.resources.pulls}]]</span>
                    </a>
                    <a class="mdc-list-item" href="https://apereo.github.io/cas/developer/Contributor-Guidelines.html">
                        <i class="mdi mdi-information"></i>&nbsp;
                        <span class="mdc-list-item__text">[[#{cas.login.resources.contribguide}]]</span>
                    </a>
                    <a class="mdc-list-item" href="https://apereo.github.io/cas/Support.html">
                        <i class="mdi mdi-help-circle"></i>&nbsp;
                        <span class="mdc-list-item__text">[[#{cas.login.resources.support}]]</span>
                    </a>
                    <a class="mdc-list-item" href="https://apereo.github.io/cas/Mailing-Lists.html">
                        <i class="mdi mdi-email-newsletter"></i>&nbsp;
                        <span class="mdc-list-item__text">[[#{cas.login.resources.mailinglist}]]</span>
                    </a>
                    <a class="mdc-list-item" href="https://gitter.im/apereo/cas">
                        <i class="mdi mdi-message-text"></i>&nbsp;
                        <span class="mdc-list-item__text">[[#{cas.login.resources.chat}]]</span>
                    </a>
                    <a class="mdc-list-item" href="https://apereo.github.io/">
                        <i class="mdi mdi-post"></i>&nbsp;
                        <span class="mdc-list-item__text">[[#{cas.login.resources.blog}]]</span>
                    </a>
                </nav>
            </div>
        </aside>

        <script>var countMessages = 0;</script>
        <div class="mdc-dialog cas-notification-dialog" id="cas-notification-dialog" role="alertdialog"
            aria-modal="true" aria-labelledby="notif-dialog-title" aria-describedby="notif-dialog-content">
            <div class="mdc-dialog__container">
                <div class="mdc-dialog__surface">
                    <h2 class="mdc-dialog__title mt-2" id="notif-dialog-title">
                        Notifications
                    </h2>
                    <div class="mdc-dialog__content" id="notif-dialog-content">
                        <div class="cas-notification-message mdc-typography--body1" th:if="${staticAuthentication}">
                            <script>countMessages++;</script>
                            <h5 class="mdc-typography--headline6" th:utext="#{screen.defaultauthn.title}" />
                            <p class="text text-wrap small" th:utext="#{screen.defaultauthn.heading}">
                                Static AuthN is ONLY useful for demo purposes. It is recommended that you connect CAS to
                                LDAP,
                                JDBC, etc
                                instead.
                            </p>
                        </div>
                        <div class="cas-notification-message mdc-typography--body1"
                            th:if="${not #httpServletRequest.secure}">
                            <h5 class="mdc-typography--headline6" th:utext="#{screen.nonsecure.title}" />
                            <script>countMessages++;</script>
                            <p class="text-wrap small" th:utext="#{screen.nonsecure.message}">
                                Unsure Connection
                            </p>
                        </div>
                    </div>
                    <footer class="mdc-dialog__actions">
                        <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="accept"
                            data-mdc-dialog-button-default>
                            <span class="mdc-button__label">OK</span>
                        </button>
                    </footer>
                </div>
            </div>
            <div class="mdc-dialog__scrim"></div>
        </div>
        <script type="text/javascript">
            
            (function (material) {
                var header = {
                    init: function () {
                        header.attachTopbar();
                        material.autoInit();
                    },
                    attachDrawer: function () {
                        var elm = document.getElementById('app-drawer');
                        var drawer = material.drawer.MDCDrawer.attachTo(elm);
                        var closeDrawer = function (evt) {
                            drawer.open = false;
                        };
                        drawer.foundation_.handleScrimClick = closeDrawer;
                        document.onkeydown = function (evt) {
                            evt = evt || window.event;
                            if (evt.keyCode == 27) {
                                closeDrawer();
                            }
                        };

                        header.drawer = drawer;

                        return drawer;
                    },
                    attachTopbar: function (drawer) {
                        var drawer = header.attachDrawer();
                        var dialog = header.attachNotificationDialog();
                        header.attachDrawerToggle(drawer);
                        header.attachNotificationToggle(dialog);
                    },
                    checkCaps: function (ev) {
                        var s = String.fromCharCode(ev.which);
                        if (s.toUpperCase() === s && s.toLowerCase() !== s && !ev.shiftKey) {
                            ev.target.parentElement.classList.add('caps-on');
                        } else {
                            ev.target.parentElement.classList.remove('caps-on');
                        }
                    },
                    attachDrawerToggle: function (drawer) {
                        var topAppBar = material.topAppBar.MDCTopAppBar.attachTo(document.getElementById('app-bar'));
                        topAppBar.setScrollTarget(document.getElementById('main-content'));
                        topAppBar.listen('MDCTopAppBar:nav', function () {
                            drawer.open = !drawer.open;
                        });
                        return topAppBar;
                    },
                    attachNotificationDialog: function () {
                        var element = document.getElementById('cas-notification-dialog');
                        var dialog = material.dialog.MDCDialog.attachTo(element);
                        return dialog;
                    },
                    attachNotificationToggle: function (dialog) {
                        var btn = document.getElementById('cas-notifications-menu');
                        btn.addEventListener('click', () => {
                            dialog.open();
                        });
                    }
                }


                document.addEventListener('DOMContentLoaded', function () {
                    header.init();

                    if (countMessages == 0) {
                        window.jQuery('#notifications-count').remove();
                    } else {
                        window.jQuery('#notifications-count').text("(" + countMessages + ")")
                    }
                });
            })(mdc);
        </script>
    </div>


</body>

</html>
